<template>
  <div class="enterprise-center">
    <!-- 左侧导航栏 -->
    <EnterpriseSidebar />

    <!-- 右侧主内容区域 -->
    <main class="main-content">
      <!-- 全局导航栏 -->
      <div class="global-nav">
        <div class="nav-left">
          <span class="nav-title">{{ $t('enterpriseSpace.navTitle') }}</span>
        </div>
      </div>

      <!-- 页面标题 -->
      <div class="page-header">
        <h1 class="page-title">
          {{ currentEditingDemandId ? $t('enterpriseSpace.editDemand') : (currentViewingDemandId ? $t('enterpriseSpace.viewDemandDetail') : $t('enterpriseSpace.publishDemand')) }}
        </h1>
        <div class="page-status" v-if="statusText || currentViewingDemandId || currentEditingDemandId">
          <el-tag v-if="currentEditingDemandId" type="warning">{{ $t('enterpriseSpace.editMode') }}</el-tag>
          <el-tag v-else-if="currentViewingDemandId" type="info">{{ $t('enterpriseSpace.viewMode') }}</el-tag>
          <el-tag v-else-if="statusText" :type="demandStatus === DEMAND_STATUS.DRAFT ? 'info' : 'warning'">
            {{ statusText }}
          </el-tag>
        </div>
      </div>

      <!-- 主要内容区域 -->
      <div class="main-content-wrapper">
        <!-- 左侧：需求发布表单 -->
        <div class="demand-form-section" :class="{ 'viewing-mode': !!currentViewingDemandId, 'editing-mode': !!currentEditingDemandId }">
          <h3 class="section-title">
            {{ currentEditingDemandId ? $t('enterpriseSpace.editDemand') : (currentViewingDemandId ? $t('enterpriseSpace.demandDetail') : $t('enterpriseSpace.publishDemand')) }}
          </h3>
          <el-form 
            :model="demandForm" 
            :rules="formRules" 
            ref="demandFormRef" 
            label-width="120px"
            :disabled="!!currentViewingDemandId"
          >
            <!-- 第一行 -->
            <div class="form-row">
              <el-form-item :label="$t('enterpriseSpace.demandType')" prop="demandType">
                <el-select v-model="demandForm.demandType" :placeholder="$t('enterpriseSpace.selectDemandType')">
                  <el-option :label="$t('enterpriseSpace.talentRecruitment')" :value="DEMAND_TYPES.RECRUITMENT" />
                  <el-option :label="$t('enterpriseSpace.tradeCooperation')" :value="DEMAND_TYPES.TRADE" />
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('enterpriseSpace.title')" prop="title">
                <el-input v-model="demandForm.title" :placeholder="$t('enterpriseSpace.enterDemandTitle')" />
              </el-form-item>
            </div>

          <!-- 第二行 -->
          <div class="form-row">
            <el-form-item :label="$t('enterpriseSpace.targetNationality')" prop="targetNationality">
              <el-select
                v-model="demandForm.targetNationality"
                :placeholder="$t('enterpriseSpace.selectCountry')"
                :loading="countriesLoading"
                filterable
              >
                <template v-for="countryItem in countries" :key="countryItem.value">
                  <el-option
                    v-if="countryItem && countryItem.value && countryItem.label"
                    :label="countryItem.label"
                    :value="countryItem.label"
                  />
                </template>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('enterpriseSpace.languageRequirement')" prop="languageRequirement">
              <el-input v-model="demandForm.languageRequirement" :placeholder="$t('enterpriseSpace.enterLanguageRequirement')" />
            </el-form-item>
          </div>

          <!-- 第三行 -->
          <div class="form-row">
            <el-form-item :label="$t('enterpriseSpace.educationRequirement')" prop="educationRequirement">
              <el-select v-model="demandForm.educationRequirement" :placeholder="$t('enterpriseSpace.selectEducation')">
                <el-option :label="$t('enterpriseSpace.highSchool')" value="高中" />
                <el-option :label="$t('enterpriseSpace.juniorCollege')" value="大专" />
                <el-option :label="$t('enterpriseSpace.bachelor')" value="本科" />
                <el-option :label="$t('enterpriseSpace.master')" value="硕士" />
                <el-option :label="$t('enterpriseSpace.doctor')" value="博士" />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('enterpriseSpace.jobType')" prop="jobType">
              <el-select v-model="demandForm.jobType" :placeholder="$t('enterpriseSpace.selectJobType')">
                <el-option :label="$t('enterpriseSpace.fullTime')" value="全职" />
                <el-option :label="$t('enterpriseSpace.partTime')" value="兼职" />
                <el-option :label="$t('enterpriseSpace.internship')" value="实习" />
                <el-option :label="$t('enterpriseSpace.projectBased')" value="项目制" />
              </el-select>
            </el-form-item>
          </div>

          <!-- 第四行 -->
          <div class="form-row">
            <el-form-item :label="$t('enterpriseSpace.experienceRequirement')" prop="experienceRequirement">
              <el-input v-model="demandForm.experienceRequirement" :placeholder="$t('enterpriseSpace.enterExperienceRequirement')" />
            </el-form-item>
            <el-form-item :label="$t('enterpriseSpace.majorRequirements')" prop="majorRequirements">
              <el-input v-model="demandForm.majorRequirements" :placeholder="$t('enterpriseSpace.enterMajorRequirements')" />
            </el-form-item>
          </div>

          <!-- 第五行 -->
          <div class="form-row">
            <el-form-item :label="$t('enterpriseSpace.country')" prop="country">
              <el-select
                v-model="demandForm.country"
                :placeholder="$t('enterpriseSpace.selectCountry')"
                :loading="countriesLoading"
                filterable
                @change="handleCountryChange"
              >
                <template v-for="countryItem in countries" :key="countryItem.value">
                  <el-option
                    v-if="countryItem && countryItem.value && countryItem.label"
                    :label="countryItem.label"
                    :value="countryItem.label"
                  />
                </template>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('enterpriseSpace.city')" prop="city">
              <el-select
                v-model="demandForm.city"
                :placeholder="$t('enterpriseSpace.selectCity')"
                :loading="citiesLoading"
                :disabled="!demandForm.country"
                filterable
              >
                <template v-for="cityItem in cities" :key="cityItem.value">
                  <el-option
                    v-if="cityItem && cityItem.value && cityItem.label"
                    :label="cityItem.label"
                    :value="cityItem.label"
                  />
                </template>
              </el-select>
            </el-form-item>
          </div>

          <!-- 第五行 -->
          <div class="form-row">
            <el-form-item :label="$t('enterpriseSpace.salaryRange')" prop="salaryRange">
              <el-input v-model="demandForm.salaryRange" :placeholder="$t('enterpriseSpace.enterSalaryRange')" />
            </el-form-item>
            <el-form-item :label="$t('enterpriseSpace.validityPeriod')" prop="validityPeriod">
              <el-date-picker
                v-model="demandForm.validityPeriod"
                type="date"
                :placeholder="$t('enterpriseSpace.selectValidityPeriod')"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </div>

          <!-- 第六行 -->
          <div class="form-row">
            <el-form-item :label="$t('enterpriseSpace.benefits')" prop="benefits">
              <el-input v-model="demandForm.benefits" :placeholder="$t('enterpriseSpace.enterBenefits')" />
            </el-form-item>
            <el-form-item :label="$t('enterpriseSpace.companyAdvantages')" prop="companyAdvantages">
              <el-input v-model="demandForm.companyAdvantages" :placeholder="$t('enterpriseSpace.enterCompanyAdvantages')" />
            </el-form-item>
          </div>

          <!-- 大文本区域 -->
          <div class="form-textareas">
            <el-form-item :label="$t('enterpriseSpace.jobDescription')" prop="jobDescription">
              <el-input
                v-model="demandForm.jobDescription"
                type="textarea"
                :rows="6"
                :placeholder="$t('enterpriseSpace.enterJobDescription')"
              />
            </el-form-item>

            <el-form-item :label="$t('enterpriseSpace.qualificationRequirements')" prop="qualificationRequirements">
              <el-input
                v-model="demandForm.qualificationRequirements"
                type="textarea"
                :rows="6"
                :placeholder="$t('enterpriseSpace.enterQualificationRequirements')"
              />
            </el-form-item>
          </div>

          <!-- 提交按钮 -->
          <div class="form-actions">
            <!-- 查看模式时显示退出查看按钮 -->
            <el-button 
              v-if="currentViewingDemandId"
              type="warning" 
              size="large" 
              @click="exitViewMode"
            >
              {{ $t('enterpriseSpace.exitView') }}
            </el-button>
            
            <!-- 编辑模式时显示保存和取消按钮 -->
            <template v-else-if="currentEditingDemandId">
              <el-button 
                type="primary" 
                size="large" 
                @click="submitDemand"
                :loading="loading"
                :disabled="loading"
              >
                {{ $t('enterpriseSpace.saveChanges') }}
              </el-button>
              <el-button 
                size="large" 
                @click="cancelEdit"
                :disabled="loading"
              >
                {{ $t('enterpriseSpace.cancel') }}
              </el-button>
            </template>
            
            <!-- 非查看/编辑模式时显示正常按钮 -->
            <template v-else>
              <el-button 
                type="primary" 
                size="large" 
                @click="submitDemand"
                :loading="loading"
                :disabled="loading"
              >
                {{ submitButtonText }}
              </el-button>
              <el-button 
                type="info" 
                size="large" 
                @click="saveDraft"
                :loading="loading"
                :disabled="loading"
              >
                {{ $t('enterpriseSpace.saveAsDraft') }}
              </el-button>
              <el-button 
                size="large" 
                @click="resetForm"
                :disabled="loading"
              >
                {{ $t('enterpriseSpace.reset') }}
              </el-button>
            </template>
          </div>
        </el-form>
        </div>

        <!-- 右侧：需求列表 -->
        <div class="demand-list-section">
          <h3 class="section-title">{{ $t('enterpriseSpace.demandList') }}</h3>
          
          <!-- 筛选区域 -->
          <div class="filter-section">
            <el-input 
              v-model="demandFilters.keyword" 
              :placeholder="$t('enterpriseSpace.searchDemandTitle')" 
              style="width: 200px;"
              clearable
            />
            
            <el-select 
              v-model="demandFilters.status" 
              :placeholder="$t('enterpriseSpace.selectStatus')" 
              style="width: 150px; margin-left: 10px;"
              clearable
            >
              <el-option :label="$t('enterpriseSpace.all')" value="" />
              <el-option :label="$t('enterpriseSpace.draft')" value="draft" />
              <el-option :label="$t('enterpriseSpace.pending')" value="pending_review" />
              <el-option :label="$t('enterpriseSpace.approved')" value="online" />
              <el-option :label="$t('enterpriseSpace.closed')" value="closed" />
              <el-option :label="$t('enterpriseSpace.rejected')" value="rejected" />
            </el-select>
            
            <el-button type="primary" @click="loadDemands" style="margin-left: 10px;">{{ $t('enterpriseSpace.search') }}</el-button>
            <el-button @click="resetDemandFilters" style="margin-left: 10px;">{{ $t('enterpriseSpace.reset') }}</el-button>
          </div>

          <!-- 需求列表 -->
          <div v-if="demands.length === 0 && !demandLoading" class="empty-state">
            <el-empty 
              :description="$t('enterpriseSpace.noDemandData')" 
              :image-size="120"
            />
          </div>

          <el-table 
            v-else 
            :data="demands" 
            v-loading="demandLoading" 
            style="width: 100%"
            :row-class-name="getRowClassName"
          >
            <el-table-column prop="title" :label="$t('enterpriseSpace.demandTitle')" min-width="200">
              <template #default="{ row }">
                <span :class="{ 'viewing-demand': currentViewingDemandId === row.demandId || currentEditingDemandId === row.demandId }">
                  {{ row.title }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="demandType" :label="$t('enterpriseSpace.demandType')" width="100">
              <template #default="{ row }">
                <el-tag :type="row.demandType === 'talent' ? 'primary' : 'success'">
                  {{ getDemandTypeText(row.demandType) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="cooperationMode" :label="$t('enterpriseSpace.cooperationMode')" width="100">
              <template #default="{ row }">
                <el-tag type="info">{{ row.cooperationMode || '-' }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="location" :label="$t('enterpriseSpace.location')" width="120">
              <template #default="{ row }">
                {{ row.location || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="demandStatus" :label="$t('enterpriseSpace.status')" width="100">
              <template #default="{ row }">
                <el-tag :type="getStatusType(row.demandStatus)">
                  {{ getStatusText(row.demandStatus) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="publishTime" :label="$t('enterpriseSpace.createTime')" width="160">
              <template #default="{ row }">
                {{ formatDate(row.publishTime) }}
              </template>
            </el-table-column>
            <el-table-column :label="$t('enterpriseSpace.operation')" width="200" fixed="right">
              <template #default="{ row }">
                <!-- 如果当前正在查看此需求，显示退出查看按钮 -->
                <el-button 
                  v-if="currentViewingDemandId === row.demandId"
                  size="small" 
                  type="warning" 
                  @click="exitViewMode"
                >
                  {{ $t('enterpriseSpace.exitView') }}
                </el-button>
                
                <!-- 如果当前正在编辑此需求，显示保存和取消按钮 -->
                <template v-else-if="currentEditingDemandId === row.demandId">
                  <el-button 
                    size="small" 
                    type="primary" 
                    @click="submitDemand"
                    :loading="loading"
                    :disabled="loading"
                  >
                    {{ $t('enterpriseSpace.save') }}
                  </el-button>
                  <el-button 
                    size="small" 
                    @click="cancelEdit"
                    :disabled="loading"
                  >
                    {{ $t('enterpriseSpace.cancel') }}
                  </el-button>
                </template>
                
                <!-- 如果当前没有查看或编辑此需求，显示查看按钮 -->
                <el-button 
                  v-else
                  size="small" 
                  @click="viewDemand(row.demandId)"
                >
                  {{ $t('enterpriseSpace.view') }}
                </el-button>
                
                <!-- 编辑按钮 - 草稿和已驳回状态可直接编辑 -->
                <el-button 
                  size="small" 
                  type="primary" 
                  @click="editDemand(row.demandId)"
                  v-if="(row.demandStatus === 'draft' || row.demandStatus === 'rejected') && currentEditingDemandId !== row.demandId"
                >
                  {{ $t('enterpriseSpace.edit') }}
                </el-button>
                
                <!-- 重新上架按钮 - 已关闭状态可重新上架 -->
                <el-button 
                  size="small" 
                  type="success" 
                  @click="reopenDemand(row.demandId)"
                  v-if="row.demandStatus === 'closed'"
                >
                  {{ $t('enterpriseSpace.reopen') }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="pagination-section">
            <el-pagination
              v-model:current-page="demandPagination.currentPage"
              v-model:page-size="demandPagination.pageSize"
              :page-sizes="[10, 20, 30, 50]"
              :total="demandPagination.totalCount"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleDemandSizeChange"
              @current-change="handleDemandCurrentChange"
            />
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { 
  ArrowUp, ArrowDown, Message, Setting, List, InfoFilled
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { enterpriseApi, DEMAND_TYPES, DEMAND_STATUS, JOB_TYPES, EDUCATION_LEVELS } from '../../api/enterprise'
import { demandApi } from '../../api/index'
import EnterpriseSidebar from '@/components/EnterpriseSidebar.vue'
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n()

// 语言检测逻辑
const detectLanguage = () => {
  const savedLang = localStorage.getItem('lang')
  if (savedLang && (savedLang === 'zh' || savedLang === 'en')) {
    locale.value = savedLang
  } else {
    // 如果没有保存的语言设置，默认使用中文
    locale.value = 'zh'
    localStorage.setItem('lang', 'zh')
  }
}

const router = useRouter()

// 表单数据
const demandForm = reactive({
  title: '',
  demandType: DEMAND_TYPES.RECRUITMENT, // 需求类型：人才招聘（默认）
  targetNationality: '',
  languageRequirement: '',
  educationRequirement: '',
  jobType: '',
  experienceRequirement: '',
  majorRequirements: '', // 专业要求
  country: '',
  city: '',
  salaryRange: '',
  validityPeriod: '',
  benefits: '',
  companyAdvantages: '',
  jobDescription: '',
  qualificationRequirements: '',
  tags: [] // 标签
})

// 页面状态
const loading = ref(false)
const isDraft = ref(false)
const currentDemandId = ref(null)
const demandStatus = ref('')
const isEditMode = ref(false) // 新增：判断是否为编辑模式

// 国籍列表
const countries = ref([])
const countriesLoading = ref(false)

// 城市列表
const cities = ref([])
const citiesLoading = ref(false)

// 需求列表相关数据
const demands = ref([])
const demandLoading = ref(false)
const demandFilters = reactive({
  keyword: '',
  status: ''
})
const demandPagination = reactive({
  currentPage: 1,
  pageSize: 10,
  totalCount: 0,
  totalPages: 0,
  hasNext: false,
  hasPrev: false
})

// 当前正在查看的需求ID
const currentViewingDemandId = ref(null)

// 当前正在编辑的需求ID
const currentEditingDemandId = ref(null)

// 表单验证规则
const formRules = computed(() => ({
  title: [
    { required: true, message: '请输入需求标题', trigger: 'blur' },
    { min: 2, max: 255, message: '需求标题长度应在2-255个字符之间', trigger: 'blur' }
  ],
  demandType: [
    { required: true, message: '请选择需求类型', trigger: 'change' }
  ],
  targetNationality: [
    { 
      required: true, 
      message: '请选择目标留学生国籍', 
      trigger: 'change'
    }
  ],
  languageRequirement: [
    { 
      required: true, 
      message: '请输入语言要求', 
      trigger: 'blur'
    }
  ],
  educationRequirement: [
    { 
      required: true, 
      message: '请选择学历要求', 
      trigger: 'change'
    }
  ],
  jobType: [
    { required: true, message: '请选择职位类型', trigger: 'change' }
  ],
  experienceRequirement: [
    { 
      required: true, 
      message: '请输入经验要求', 
      trigger: 'blur'
    }
  ],
  majorRequirements: [
    { 
      required: true, 
      message: '请输入专业要求', 
      trigger: 'blur'
    }
  ],
  country: [
    { required: true, message: '请选择国家', trigger: 'change' }
  ],
  city: [
    { required: true, message: '请选择城市', trigger: 'change' }
  ],
  salaryRange: [
    { 
      required: false, 
      message: '请输入薪资范围', 
      trigger: 'blur'
    }
  ],
  validityPeriod: [
    { required: false, message: '请选择需求有效期', trigger: 'change' }
  ],
  jobDescription: [
    { required: true, message: '请输入职责描述', trigger: 'blur' }
  ],
  qualificationRequirements: [
    { required: true, message: '请输入资格要求', trigger: 'blur' }
  ],
}))

const demandFormRef = ref()

// 监听需求类型变化，动态显示相关字段
watch(() => demandForm.demandType, (newType) => {
  // 当需求类型改变时，可以在这里添加逻辑
      console.log(t('enterpriseSpace.demandTypeChanged'), newType)
})

// 导航方法
const goToCreateDemand = () => {
  // 当前页面，不需要跳转
}

const goToApplicationRecords = () => {
  router.push({ name: 'enterprise-application-records' })
}

const goToMessages = () => {
  router.push({ name: 'enterprise-messages' })
}

const goToSettings = () => {
  router.push({ name: 'enterprise-settings' })
}

// 表单提交
const submitDemand = async () => {
  try {
    if (!demandFormRef.value) {
      ElMessage.error('表单组件未初始化')
      return
    }
    
    await demandFormRef.value.validate()
    loading.value = true
    
    // 构建请求数据 - 根据编辑接口格式
    const requestData = {
      demandType: demandForm.demandType,
      title: demandForm.title,
      description: demandForm.jobDescription || '暂无描述',
      requirements: demandForm.qualificationRequirements || '暂无要求',
      targetNationalities: demandForm.targetNationality || '',
      languageRequirements: demandForm.languageRequirement || '',
      majorRequirements: demandForm.majorRequirements || '',
      degreeRequirements: demandForm.educationRequirement || '',
      experienceRequirements: demandForm.experienceRequirement || '',
      cooperationMode: demandForm.jobType || '',
      location: `${demandForm.country || ''} ${demandForm.city || ''}`.trim(),
      salaryRange: demandForm.salaryRange || '',
      validityPeriod: demandForm.validityPeriod || '',
      benefits: demandForm.benefits || '',
      companyAdvantages: demandForm.companyAdvantages || ''
    }
    
    // 数据验证
    if (!requestData.title || requestData.title.trim() === '') {
      ElMessage.error('请输入需求标题')
      return
    }
    
    if (requestData.title.trim().length < 2 || requestData.title.trim().length > 255) {
      ElMessage.error('需求标题长度应在2-255个字符之间')
      return
    }
    
    if (!requestData.description || requestData.description.trim() === '') {
      ElMessage.error('请输入需求描述')
      return
    }
    
    if (!requestData.requirements || requestData.requirements.trim() === '') {
      ElMessage.error('请输入需求要求')
      return
    }
    
    // 根据需求类型进行不同的验证
    if (demandForm.demandType === DEMAND_TYPES.RECRUITMENT) {
      // 人才招聘相关字段验证
      if (!requestData.targetNationalities || requestData.targetNationalities.trim() === '') {
        ElMessage.error('请选择目标留学生国籍')
        return
      }
      
      if (!requestData.languageRequirements || requestData.languageRequirements.trim() === '') {
        ElMessage.error('请输入语言要求')
        return
      }
      
      if (!requestData.majorRequirements || requestData.majorRequirements.trim() === '') {
        ElMessage.error('请输入专业要求')
        return
      }
      
      if (!requestData.degreeRequirements || requestData.degreeRequirements.trim() === '') {
        ElMessage.error('请选择学历要求')
        return
      }
      
      if (!requestData.experienceRequirements || requestData.experienceRequirements.trim() === '') {
        ElMessage.error('请输入经验要求')
        return
      }
    }
    
    let response
    
    if (currentEditingDemandId.value && currentDemandId.value) {
      // 编辑模式：调用编辑接口
          console.log(t('enterpriseSpace.editModeCallingEditAPI'), currentDemandId.value)
    console.log(t('enterpriseSpace.editRequestData'), requestData)
      
      response = await enterpriseApi.editDemand(currentDemandId.value, requestData)
      
      if (response.code === 200) {
        ElMessage.success('需求编辑成功！')
        // 更新本地状态
        currentDemandId.value = response.data.demandId || currentDemandId.value
        demandStatus.value = response.data.status || response.data.demandStatus || ''
        // 刷新需求列表
        await loadDemands()
        // 退出编辑模式
        exitViewMode()
      } else {
        // 处理编辑失败的情况
        ElMessage.error(response.error || response.message || '编辑失败')
      }
    } else {
      // 发布模式：调用发布接口
      response = await enterpriseApi.publishDemand(requestData)
      
      if (response.code === 'SUCCESS' || response.code === 200) {
        ElMessage.success('需求发布成功，等待管理员审核！')
        currentDemandId.value = response.data.demandId
        demandStatus.value = response.data.status
        isDraft.value = false
        
        // 跳转到申请记录页面
        router.push({ name: 'enterprise-application-records' })
      } else {
        // 处理特定的错误情况
        if (response.code === 'ACCESS_DENIED') {
          ElMessage.error(t('enterpriseSpace.accessDenied'))
        } else if (response.code === 'CERTIFICATION_REQUIRED') {
          ElMessage.error(t('enterpriseSpace.certificationRequired'))
        } else {
          ElMessage.error(response.error || response.message || t('enterpriseSpace.publishFailed'))
        }
      }
    }
  } catch (error) {
    console.error(t('enterpriseSpace.submitDemandFailed'), error)
    
    // 处理不同的错误情况
    if (error.response) {
      const status = error.response.status
      const errorData = error.response.data
      
      switch (status) {
        case 400:
          // 处理400错误，显示具体的字段验证错误
          if (errorData && typeof errorData === 'object') {
            const errorMessages = []
            for (const [field, errors] of Object.entries(errorData)) {
              if (Array.isArray(errors) && errors.length > 0) {
                errorMessages.push(`${field}: ${errors[0]}`)
              } else if (typeof errors === 'string') {
                errorMessages.push(errors)
              }
            }
            if (errorMessages.length > 0) {
              ElMessage.error(`${t('enterpriseSpace.formValidationFailed')}${errorMessages.join(', ')}`)
            } else {
              ElMessage.error(errorData?.error || t('enterpriseSpace.parameterError'))
            }
          } else {
            ElMessage.error(errorData?.error || t('enterpriseSpace.parameterError'))
          }
          break
        case 403:
          ElMessage.error(errorData?.error || t('enterpriseSpace.editPermissionDenied'))
          break
        case 404:
          ElMessage.error(errorData?.error || t('enterpriseSpace.demandNotFound'))
          break
        case 500:
          ElMessage.error(errorData?.error || t('enterpriseSpace.serverError'))
          break
        default:
          ElMessage.error(errorData?.error || t('enterpriseSpace.operationFailed'))
      }
    } else {
      // 当没有response时，可能是网络问题或其他异常
      if (error.message && error.message.includes('timeout')) {
        ElMessage.error(t('enterpriseSpace.requestTimeout'))
      } else if (error.message && error.message.includes('Network Error')) {
        ElMessage.error(t('enterpriseSpace.networkError'))
      } else {
        ElMessage.error(t('enterpriseSpace.operationFailed'))
      }
    }
  } finally {
    loading.value = false
  }
}

// 保存草稿
const saveDraft = async () => {
  try {
    loading.value = true
    
    // 构建草稿数据（不需要验证所有必填字段）
    const draftData = {
      demandType: demandForm.demandType,
      title: demandForm.title || t('enterpriseSpace.unnamedDraft'),
      description: demandForm.jobDescription || '',
      requirements: demandForm.qualificationRequirements || '',
      targetNationalities: demandForm.targetNationality || '',
      languageRequirements: demandForm.languageRequirement || '',
      majorRequirements: demandForm.majorRequirements || '',
      degreeRequirements: demandForm.educationRequirement || '',
      experienceRequirements: demandForm.experienceRequirement || '',
      cooperationMode: demandForm.jobType || '',
      location: `${demandForm.country || ''} ${demandForm.city || ''}`.trim(),
      salaryRange: demandForm.salaryRange || '',
      validityPeriod: demandForm.validityPeriod ? new Date(demandForm.validityPeriod).toISOString() : null,
      benefits: demandForm.benefits || '',
      companyAdvantages: demandForm.companyAdvantages || ''
    }
    
    // 调用保存草稿API
    const response = await enterpriseApi.saveDraft(draftData)
    
    if (response.code === 200 || response.code === 'SUCCESS') {
      ElMessage.success(t('enterpriseSpace.saveDraftSuccess'))
      // 更新本地状态
      currentDemandId.value = response.data.demandId
      demandStatus.value = 'draft'
      isDraft.value = true
    } else {
      ElMessage.error(response.error || response.message || '草稿保存失败')
    }
    
  } catch (error) {
    // 处理错误
    if (error.response) {
      const status = error.response.status
      const errorData = error.response.data
      
      switch (status) {
        case 400:
          ElMessage.error(errorData?.error || '草稿数据格式错误')
          break
        case 403:
          ElMessage.error(errorData?.error || t('enterpriseSpace.accessDenied'))
          break
        case 500:
          ElMessage.error(errorData?.error || '服务器错误，请稍后重试')
          break
        default:
          ElMessage.error(errorData?.error || '草稿保存失败，请稍后重试')
      }
    } else {
      ElMessage.error('草稿保存失败，请稍后重试')
    }
  } finally {
    loading.value = false
  }
}

// 重置表单
const resetForm = async () => {
  try {
    await ElMessageBox.confirm('确定要重置表单吗？未保存的内容将丢失。', '确认重置', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    if (demandFormRef.value) {
      demandFormRef.value.resetFields()
    }
    currentDemandId.value = null
    currentViewingDemandId.value = null
    currentEditingDemandId.value = null
    isDraft.value = false
    demandStatus.value = ''
    ElMessage.info('表单已重置')
  } catch (error) {
    // 用户取消重置
  }
}

// 加载需求数据
const loadDemand = async (demandId) => {
  try {
    loading.value = true
    const response = await enterpriseApi.getDemand(demandId)
    
    if (response.code === 200) {
      // 处理嵌套的数据结构
      const demand = response.data.demand || response.data
      
      // 正确映射需求字段到表单字段
      demandForm.title = demand.title || ''
      demandForm.demandType = demand.demandType || DEMAND_TYPES.RECRUITMENT
      demandForm.targetNationality = demand.targetNationalities || ''
      demandForm.languageRequirement = demand.languageRequirements || ''
      demandForm.educationRequirement = demand.degreeRequirements || ''
      demandForm.jobType = demand.cooperationMode || ''
      demandForm.experienceRequirement = demand.experienceRequirements || ''
      demandForm.majorRequirements = demand.majorRequirements || ''
      
      // 处理工作地点（可能包含国家和城市）
      if (demand.location) {
        const locationParts = demand.location.split(' ')
        if (locationParts.length >= 2) {
          demandForm.country = locationParts[0]
          demandForm.city = locationParts[1]
        } else {
          demandForm.country = demand.location
          demandForm.city = ''
        }
      } else {
        demandForm.country = ''
        demandForm.city = ''
      }
      
      demandForm.salaryRange = demand.salaryRange || ''
      demandForm.validityPeriod = demand.validityPeriod || ''
      demandForm.benefits = demand.benefits || ''
      demandForm.companyAdvantages = demand.companyAdvantages || ''
      demandForm.jobDescription = demand.description || ''
      demandForm.qualificationRequirements = demand.requirements || ''
      
      currentDemandId.value = demand.demandId || demand.id || demandId
      demandStatus.value = demand.demandStatus || demand.status || ''
      isDraft.value = (demand.demandStatus || demand.status) === DEMAND_STATUS.DRAFT
      isEditMode.value = true // 设置为编辑模式
      
    } else {
      ElMessage.error(response.error || response.message || '加载需求失败')
    }
  } catch (error) {
    console.error(t('enterpriseSpace.loadDemandsFailed'), error)
    
    // 处理不同的错误情况
    if (error.response) {
      const status = error.response.status
      const errorData = error.response.data
      
      switch (status) {
        case 403:
          ElMessage.error(errorData?.error || t('enterpriseSpace.accessDenied'))
          break
        case 404:
          ElMessage.error(errorData?.error || '需求不存在')
          break
        case 500:
          ElMessage.warning('需求详情接口暂未实现，请直接编辑')
          // 设置编辑模式，让用户可以手动填写
          isEditMode.value = true
          currentDemandId.value = demandId
          demandStatus.value = 'draft' // 默认设置为草稿状态
          break
        default:
          ElMessage.error(errorData?.error || '加载需求失败')
      }
    } else {
      // 当没有response时，可能是网络问题或其他异常
      if (error.message && error.message.includes('timeout')) {
        ElMessage.error('请求超时，请稍后重试')
      } else if (error.message && error.message.includes('Network Error')) {
        ElMessage.error(t('enterpriseSpace.networkError'))
      } else {
        ElMessage.error(t('enterpriseSpace.loadDemandsFailed'))
      }
    }
  } finally {
    loading.value = false
  }
}

// 加载国籍列表
const loadCountries = async () => {
  try {
    countriesLoading.value = true
    const response = await enterpriseApi.getCountries()
    
    if (response.code === 200 || response.code === 'SUCCESS') {
      // 过滤掉无效数据
      countries.value = (response.data || []).filter(countryItem => 
        countryItem && countryItem.value && countryItem.label
      )
    } else {
      ElMessage.error('获取国籍列表失败')
      countries.value = []
    }
  } catch (error) {
    ElMessage.error('获取国籍列表失败，请检查网络连接')
    countries.value = []
  } finally {
    countriesLoading.value = false
  }
}

// 加载城市列表
const loadCities = async (countryId) => {
  if (!countryId) {
    cities.value = []
    return
  }
  
  try {
    citiesLoading.value = true
    const response = await enterpriseApi.getCities(countryId)
    
    if (response.code === 200 || response.code === 'SUCCESS') {
      // 过滤掉无效数据
      cities.value = (response.data.cities || []).filter(cityItem => 
        cityItem && cityItem.value && cityItem.label
      )
    } else {
      ElMessage.error(response.message || '加载城市列表失败')
      cities.value = []
    }
  } catch (error) {
    ElMessage.error('加载城市列表失败，请稍后重试')
    cities.value = []
  } finally {
    citiesLoading.value = false
  }
}

// 监听国家选择变化
const handleCountryChange = (countryLabel) => {
  // 清空城市选择
  demandForm.city = ''
  cities.value = []
  
  // 根据国家标签找到对应的国家ID
  const selectedCountry = countries.value.find(countryItem => countryItem.label === countryLabel)
  
  if (selectedCountry) {
    loadCities(selectedCountry.value)
  }
}

// 需求列表相关方法
const loadDemands = async () => {
  try {
    demandLoading.value = true
    const params = {
      page: demandPagination.currentPage,
      pageSize: demandPagination.pageSize
    }
    
    // 只有当状态筛选不为空时才添加status参数
    if (demandFilters.status) {
      params.status = demandFilters.status
    }
    
    // 使用企业需求API接口
    const response = await demandApi.getDemandList(params)
    
    if (response.code === 200) {
      demands.value = response.data.demands || []
      demandPagination.totalCount = response.data.pagination.totalCount
      demandPagination.totalPages = response.data.pagination.totalPages
      demandPagination.hasNext = response.data.pagination.hasNext
      demandPagination.hasPrev = response.data.pagination.hasPrev
    } else {
      ElMessage.error(response.message || '加载失败')
    }
  } catch (error) {
    // 处理500错误 - 后端API可能未实现
    if (error.response?.status === 500) {
      // 不显示错误消息，直接显示空状态
      demands.value = []
      demandPagination.totalCount = 0
      demandPagination.totalPages = 0
      demandPagination.hasNext = false
      demandPagination.hasPrev = false
      return
    }
    
    // 处理其他错误
    if (error.response?.status === 400) {
      ElMessage.error('参数错误，请检查筛选条件')
    } else if (error.response?.status === 403) {
              ElMessage.error(t('enterpriseSpace.accessDenied'))
    } else if (error.response?.status === 404) {
              ElMessage.error(t('enterpriseSpace.enterpriseInfoNotFound'))
    } else {
      ElMessage.error('网络连接失败，请检查网络设置')
    }
  } finally {
    demandLoading.value = false
  }
}

const resetDemandFilters = () => {
  demandFilters.keyword = ''
  demandFilters.status = ''
  demandPagination.currentPage = 1
  loadDemands()
}

const handleDemandSizeChange = (size) => {
  demandPagination.pageSize = size
  demandPagination.currentPage = 1
  loadDemands()
}

const handleDemandCurrentChange = (page) => {
  demandPagination.currentPage = page
  loadDemands()
}

// 需求操作相关方法
const viewDemand = async (demandId) => {
  try {
    // 设置当前查看的需求ID
    currentViewingDemandId.value = demandId
    
    // 使用现有的loadDemand方法加载需求数据
    await loadDemand(demandId)
    
    // 设置为查看模式（非编辑模式）
    isEditMode.value = false
    
    // 显示成功消息
    ElMessage.success('需求数据已加载到表单中')
    
    // 刷新需求列表以更新状态
    await loadDemands()
    
    // 滚动到表单区域
    nextTick(() => {
      const formSection = document.querySelector('.demand-form-section')
      if (formSection) {
        formSection.scrollIntoView({ behavior: 'smooth' })
      }
    })
  } catch (error) {
    console.error(t('enterpriseSpace.loadDemandDetailFailed'), error)
          ElMessage.error(t('enterpriseSpace.loadDemandDetailFailed'))
  }
}

const editDemand = (demandId) => {
  // 设置当前编辑的需求ID
  currentEditingDemandId.value = demandId
  // 清除查看状态
  currentViewingDemandId.value = null
  
  // 加载需求数据到表单中
  loadDemand(demandId)
  
  // 设置为编辑模式
  isEditMode.value = true
  
  // 显示成功消息
  ElMessage.success('需求数据已加载到表单中，可以开始编辑')
  
  // 滚动到表单区域
  nextTick(() => {
    const formSection = document.querySelector('.demand-form-section')
    if (formSection) {
      formSection.scrollIntoView({ behavior: 'smooth' })
    }
  })
}

const reopenDemand = async (demandId) => {
  try {
    const response = await enterpriseApi.reopenDemand(demandId)
    if (response.code === 200) {
      ElMessage.success(t('enterpriseSpace.reopenSuccess'))
      loadDemands() // 重新加载列表
    } else {
      ElMessage.error(response.message || t('enterpriseSpace.reopenFailed'))
    }
  } catch (error) {
    ElMessage.error(t('enterpriseSpace.reopenRetry'))
  }
}

// 退出查看模式
const exitViewMode = () => {
  currentViewingDemandId.value = null
  currentEditingDemandId.value = null
  
  // 重置表单数据到默认值
  demandForm.title = ''
  demandForm.demandType = DEMAND_TYPES.RECRUITMENT
  demandForm.targetNationality = ''
  demandForm.languageRequirement = ''
  demandForm.educationRequirement = ''
  demandForm.jobType = ''
  demandForm.experienceRequirement = ''
  demandForm.majorRequirements = ''
  demandForm.country = ''
  demandForm.city = ''
  demandForm.salaryRange = ''
  demandForm.validityPeriod = ''
  demandForm.benefits = ''
  demandForm.companyAdvantages = ''
  demandForm.jobDescription = ''
  demandForm.qualificationRequirements = ''
  demandForm.tags = []
  
  // 重置表单状态
  currentDemandId.value = null
  demandStatus.value = ''
  isEditMode.value = false
  isDraft.value = false
  
  // 重置表单验证
  if (demandFormRef.value) {
    demandFormRef.value.resetFields()
  }
  
  ElMessage.info(t('enterpriseSpace.exitViewMode'))
}

// 取消编辑
const cancelEdit = () => {
  // 重新加载原始数据
  if (currentEditingDemandId.value) {
    loadDemand(currentEditingDemandId.value)
    // 设置为查看模式
    isEditMode.value = false
    // 清除编辑状态，设置为查看状态
    currentViewingDemandId.value = currentEditingDemandId.value
    currentEditingDemandId.value = null
    ElMessage.info(t('enterpriseSpace.cancelEditMode'))
  }
}

// 工具方法
const getDemandTypeText = (type) => {
  const typeMap = {
    'talent': t('enterpriseSpace.talentRecruitment'),
    'trade': t('enterpriseSpace.tradeCooperation')
  }
  return typeMap[type] || type
}

const getStatusText = (status) => {
  const statusMap = {
    'draft': t('enterpriseSpace.draft'),
    'pending_review': t('enterpriseSpace.pending'),
    'approved': t('enterpriseSpace.approved'),
    'rejected': t('enterpriseSpace.rejected'),
    'online': t('enterpriseSpace.approved'),
    'closed': t('enterpriseSpace.closed'),
    'expired': t('enterpriseSpace.expired')
  }
  return statusMap[status] || status
}

const getStatusType = (status) => {
  const typeMap = {
    'draft': 'info',
    'pending_review': 'warning',
    'approved': 'success',
    'rejected': 'danger',
    'online': 'success',
    'closed': 'info',
    'expired': 'warning'
  }
  return typeMap[status] || 'info'
}

const formatDate = (dateString) => {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 组件挂载
onMounted(() => {
  // 检测并设置语言
  detectLanguage()
  
  // 加载国籍列表
  loadCountries()
  
  // 加载需求列表
  loadDemands()
  
  // 检查URL参数
  const urlParams = new URLSearchParams(window.location.search)
  const demandId = urlParams.get('demandId')
  const mode = urlParams.get('mode')
  
  if (demandId) {
    nextTick(() => {
      loadDemand(demandId)
    })
  }
  
  // 如果明确指定了编辑模式，设置编辑模式
  if (mode === 'edit') {
    isEditMode.value = true
  }
  
  // 确保查看状态被正确初始化
  currentViewingDemandId.value = null
})

// 计算属性
const submitButtonText = computed(() => {
  if (loading.value) return t('enterpriseSpace.submitting')
  if (isEditMode.value) return t('enterpriseSpace.saveChanges')
  if (isDraft.value) return t('enterpriseSpace.submitForReview')
  return t('enterpriseSpace.publishDemand')
})

const statusText = computed(() => {
  const statusMap = {
    [DEMAND_STATUS.DRAFT]: '草稿',
    [DEMAND_STATUS.PENDING_REVIEW]: '待审核',
    [DEMAND_STATUS.APPROVED]: '已通过',
    [DEMAND_STATUS.REJECTED]: '已拒绝',
    [DEMAND_STATUS.PUBLISHED]: '已发布',
    [DEMAND_STATUS.CLOSED]: '已关闭',
    [DEMAND_STATUS.EXPIRED]: '已过期'
  }
  return statusMap[demandStatus.value] || ''
})

// 表格行类名方法
const getRowClassName = ({ row }) => {
  if (currentViewingDemandId.value === row.demandId || currentEditingDemandId.value === row.demandId) {
    return 'viewing-demand-row'
  }
  return ''
}

</script>

<style scoped>
.enterprise-center {
  display: flex;
  min-height: 100vh;
  background-color: #f5f5f5;
  /* 添加平滑过渡效果 */
  transition: all 0.2s ease;
}

/* 左侧导航栏 */
.sidebar {
  width: 280px;
  background-color: #f8f9fa;
  border-right: 1px solid #e9ecef;
  display: flex;
  flex-direction: column;
  /* 添加阴影效果，避免白色边缘 */
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.company-info {
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
  background-color: #ffffff;
}

.company-logo {
  margin-bottom: 15px;
}

.logo-square {
  width: 40px;
  height: 40px;
  background-color: #1976d2;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  border-radius: 4px;
}

.company-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.company-id {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
}

.id-controls {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navigation-menu {
  flex: 1;
  padding: 20px 0;
  background-color: #f8f9fa;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: #666;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
  /* 添加hover时的背景色变化 */
  background-color: transparent;
}

.nav-item:hover {
  background-color: #e9ecef;
  color: #333;
  transform: translateX(2px);
}

.nav-item.active {
  background-color: #e3f2fd;
  color: #1976d2;
  border-left-color: #1976d2;
  font-weight: 500;
}

.nav-item span {
  flex: 1;
}

/* 右侧主内容区域 */
.main-content {
  flex: 1;
  padding: 30px;
  background-color: #fafafa;
  /* 添加平滑过渡效果 */
  transition: all 0.2s ease;
  /* 添加内容区域的阴影 */
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
}

.global-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 30px;
  background-color: #ffffff;
  border-bottom: 1px solid #e9ecef;
  margin: -30px -30px 30px -30px;
  /* 添加阴影效果 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nav-left .nav-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.page-header {
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.page-status {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 主要内容区域布局 */
.main-content-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}

/* 左侧表单区域 */
.demand-form-section {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
}

.demand-form-section:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* 查看模式时的表单样式 */
.demand-form-section.viewing-mode {
  background-color: #f8f9fa;
  border: 2px solid #e3f2fd;
}

.demand-form-section.viewing-mode::before {
  content: '查看模式';
  position: absolute;
  top: -10px;
  left: 20px;
  background-color: #1976d2;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

/* 编辑模式时的表单样式 */
.demand-form-section.editing-mode {
  background-color: #f8f9fa;
  border: 2px solid #e3f2fd;
}

.demand-form-section.editing-mode::before {
  content: '编辑模式';
  position: absolute;
  top: -10px;
  left: 20px;
  background-color: #409eff; /* 蓝色背景 */
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

/* 右侧需求列表区域 */
.demand-list-section {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.demand-list-section:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #e9ecef;
}

/* 表单样式 */
.demand-form {
  max-width: 100%;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  transition: none;
}

.demand-form:hover {
  box-shadow: none;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.location-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-textareas {
  margin-top: 30px;
}

.form-textareas .el-form-item {
  margin-bottom: 20px;
}

.form-actions {
  margin-top: 40px;
  display: flex;
  gap: 15px;
  justify-content: center;
}

/* 需求列表相关样式 */
.filter-section {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* 查看中的需求行样式 */
:deep(.viewing-demand-row) {
  background-color: #f5f5f5 !important;
  opacity: 0.8;
}

:deep(.viewing-demand-row:hover) {
  background-color: #e8e8e8 !important;
}

/* 查看中的需求标题样式 */
.viewing-demand {
  color: #666;
  font-style: italic;
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  background-color: #fafafa;
  border-radius: 8px;
  margin: 20px 0;
}

.pagination-section {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-content-wrapper {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .enterprise-center {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e9ecef;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .location-group {
    grid-template-columns: 1fr;
  }
  
  .main-content {
    padding: 20px;
  }
  
  .demand-form-section,
  .demand-list-section {
    padding: 20px;
  }
  
  .filter-section {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-section .el-input,
  .filter-section .el-select {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* Element Plus 组件样式调整 */
:deep(.el-form-item__label) {
  font-weight: 500;
  color: #333;
}

:deep(.el-input__wrapper) {
  border-radius: 4px;
  transition: all 0.2s ease;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #409eff;
}

:deep(.el-select .el-input__wrapper) {
  border-radius: 4px;
}

:deep(.el-textarea__inner) {
  border-radius: 4px;
  transition: all 0.2s ease;
}

:deep(.el-textarea__inner:hover) {
  box-shadow: 0 0 0 1px #409eff;
}

:deep(.el-date-editor) {
  border-radius: 4px;
}

/* 添加页面加载时的平滑效果 */
.enterprise-center {
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style> 